<template>
  <div class="tc-div">
    <TcSearchForm @search="doSearch" @reset="cleanChart"></TcSearchForm>
    <el-empty v-if="isEmpty" description="无数据" />
    <LineChartX
     v-else
     ref="lineChartRef"
     :option="option" 
     :style="chartStyle">

    </LineChartX>
    
  </div>
</template>

<script setup>
import { ref, computed, onUnmounted, onBeforeMount } from 'vue';
import LineChartX from '@/components/Charts/LineChartX.vue'
import TcSearchForm from './TcSearchForm.vue'
import { useTmStore } from '@/stores/tm-module'
import { searchTcApi } from '@/api/search-api'
import { deepClone } from '@/comm/index.js'

const tmStore = useTmStore()
let chartStyle =ref({'height': '510px'})
let dataset = ref({})
let isEmpty = ref(true)
let lineChartRef = ref(null)
let option = ref( {
  backgroundColor: 'rgba(14, 14, 18, 0.8)', 
  tooltip: {
    trigger: 'axis',
    position: function (pt) {
      return [pt[0], '10%'];
    }
  },
  title: {
    left: 'center',
    text: ''
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  dataZoom: [
    {type: 'inside'},
    {
      type: 'slider',
      xAxisIndex: 0,
      minSpan: 5,
      height: 15
    },
    {
      type: 'slider',
      yAxisIndex: 0,
      width: 15
    },
    {
      type: 'inside',
      yAxisIndex: 0
    }
  ],
  xAxis: { type: 'category' },
  yAxis: { gridIndex: 0 }, 
});

const arrangeArr = (arr) => {
  let nodesource = []
  let valueArr = []
  let timeArr = []
  for(let oneTm of arr) {
    let tmName = oneTm['name']
    valueArr = [tmName]
    timeArr = []
    for(let oneNode of oneTm['rows']) {
      timeArr.push(oneNode['timestamp'])
      valueArr.push(oneNode['valuedb'])
    }
    nodesource.push(valueArr)
  }
  timeArr.unshift('product')
  nodesource.unshift(timeArr)
  return nodesource
}

const genSeries = (srcArr) => {
  let series = []
  for(let i=0; i< srcArr.length-1; i++) {
    series.push({ type: 'line', seriesLayoutBy: 'row' })
  }
  return series
}

const searchForm = computed(() => tmStore.searchForm)
const drawChart = () => {
  let reqJson = deepClone(searchForm.value)
  delete reqJson['timeRange']
  if(reqJson.ids.length === 0) {
    delete reqJson['ids']
  }
  searchTcApi(reqJson, (response) => {
      let resData = response.data
      let resTms = resData.data?.tms || []
      if(resTms.length > 0) {
        let source  = arrangeArr(resTms)
        dataset.value = { source }
        option.value.dataset = dataset
        option.value.series = genSeries(source)
        if(source.length > 0) {
          isEmpty.value = false
        }

      }
    }, (error) => {
      console.log("error:", error)
    })
}
const cleanChart = () => {
  isEmpty.value = true
  if(lineChartRef.value) {
    lineChartRef.value.cleanChart()
  }
}
const doSearch = () => {
  if(lineChartRef.value) {
    lineChartRef.value.cleanChart()
  }
  drawChart()
}
onBeforeMount(() => {
  let browserHeight = window.innerHeight - 550;
  chartStyle.value= { 'height': browserHeight + 'px' }
})
onUnmounted (() => {
  isEmpty.value = true
})
</script>

<style lang="scss" scoped>
#tc-div {
  height: 600px;
}
</style>